.card-product{ margin-bottom:1rem;
     &:after{content:"";  display:table; clear:both; visibility:hidden; }
    .price-wrap{ }
    .img-wrap{ 
        border-radius:$border-radius-sm $border-radius-sm 0 0;
        overflow:hidden; 
        position:relative;
        height:220px;
        text-align: center;
        img{ max-height:100%; max-width:100%; width:auto; display:inline-block; object-fit:cover;}
    }
    .info-wrap{ overflow:hidden;  padding:15px; border-top:1px solid #eee;}
    .action-wrap{padding-top:4px; margin-top:4px}
    .bottom-wrap{padding:15px; border-top:1px solid #eee;}
    .title{margin-top:0; }
    /* btn-overlay-bottom */
    .btn-overlay { 
        transition:.5s;  opacity:0;
        left: 0;  bottom: 0;
        color: #fff;   width: 100%;   padding: 5px 0;     font-size: 12px;   text-align: center;
        position: absolute;    text-transform: uppercase;
        background: rgba(0,0,0,0.5);
    }
    &:hover .btn-overlay{ opacity:1;}
    &:hover{box-shadow:0 4px 15px rgba(#999, .3); transition:.5s}
}

.card-sm{
    .img-wrap{height:180px;}
}

.card-banner{display:flex; position:relative; overflow:hidden;  
    background-color:#fff; background-size: cover;  border-radius:$border-radius;
    .card-body{background-size: cover; position:relative; z-index:10}
    .img-bg{
        position: absolute; right:0; bottom:0;
        mix-blend-mode: multiply; max-width:100%;
    }
    .overlay{ background-color:rgba(#000, .65); z-index:10;  padding:1.25rem; color:#fff;    }
    .overlay.bottom{ bottom:0; left:0;  position:absolute;  width:100%; }
    .overlay.top{ top:0; left:0; position:absolute;  width:100%; }
    .overlay-cover{ top:0; left:0; right:0; bottom:0; position:absolute;  width:100%; }
    .overlay.left{ top:0; left:0; bottom:0; position:absolute;}

    .text-bottom{ position:absolute; left:0; bottom:0; left:0; z-index:10; width:100%; 
        padding:7px 20px; padding-top:30px;  border-radius:0 0 $border-radius $border-radius;
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
        color: #fff;
    }
}

.banner-size-lg{ height: 350px; }